<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <!-- <img src="../assets/heima.png" alt="" /> -->
        <span>欢迎登录AI图书智能管理系统</span>
      </div>
      <div>
        <span style="color: #ccc; font-size: 18px;line-height: 30px;">用户界面</span>
        <div>
          <img
            src="../../assets/image/logo.png"
            style="margin-left: 10px;margin-right: 10px;height:50px;border-radius: 50%;"
          ></img>
        </div>

        <!-- <div class="user">用户:{{ user.cardName }}</div> -->
        <el-button type="info" @click="logout">退出</el-button>
      </div>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '180px'">
        <!-- 侧边栏菜单区域 -->
        <el-menu
          :default-active="activePath"
          class="el-menu-vertical-demo"
          background-color="#fff"
          text-color="black"
          active-text-color="#00BFFF"
          :router="true"
          :collapse="isCollapse"
          :collapse-transition="false"
        >
        <div class="toggle-button" @click="toggleCollapse">
            <el-icon><Operation /></el-icon>
          </div>
          <!-- <el-menu-item index="First" @click="saveNavState('First')">
            <el-icon><Monitor /></el-icon>
            <span slo="title">首页</span>
          </el-menu-item> -->
          <el-menu-item index="Search" @click="saveNavState('Search')">
            <el-icon><ZoomOut /></el-icon>
            <span slot="title">图书查询</span>
          </el-menu-item>
          <el-menu-item index="Rule" @click="saveNavState('Rule')">
            <el-icon><Notebook /></el-icon>
            <span slot="title">读者规则</span>
          </el-menu-item>
          <el-menu-item index="News" @click="saveNavState('News')">
            <el-icon><Tickets /></el-icon>
            <span slot="title">查看公告</span>
          </el-menu-item>
          <el-menu-item index="Message" @click="saveNavState('Message')">
            <el-icon><Stamp /></el-icon>
            <span slot="title">个人信息</span>
          </el-menu-item>
          <el-menu-item index="Borrow" @click="saveNavState('Borrow')">
            <el-icon><Orange /></el-icon>
            <span slot="title">借阅信息</span>
          </el-menu-item>
          <el-menu-item index="Peccant" @click="saveNavState('Peccant')">
            <el-icon><WarnTriangleFilled /></el-icon>
            <span slot="title">违章信息</span>
          </el-menu-item>
          <el-menu-item index="Comment" @click="saveNavState('Comment')">
            <el-icon><ChatDotRound /></el-icon>
            <span slot="title">读者留言</span>
          </el-menu-item>
          <el-menu-item index="Intelligent" @click="saveNavState('Intelligent')">
            <el-icon><Promotion /></el-icon>
            <span slot="title">智能推荐</span>
          </el-menu-item>
          
        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <!-- 路由占位符 -->
        <!-- <router-view></router-view> -->
        <!-- <router-link></router-link> -->

        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
//左侧菜单数据
// const menulist = ref([]);

//是否折叠
let isCollapse = ref(false);
//被激活的链接地址
const activePath = ref("Search");
const user = reactive({
  userId: 0,
  cardNumber: 0,
  ruleNumber: 0,
  status: 0,
  cardName: "",
  username: "",
  password: "",
  createTime: "",
  updateTime: "",
});
onMounted(() => {
  router.push({ name: activePath.value });
});
const logout = function () {
  window.sessionStorage.clear();
  router.push({ name: "Userlogin" });
};

//点击按钮，切换菜单的折叠与展开
const toggleCollapse = function () {
  isCollapse.value = !isCollapse.value;
};
//保存链接的激活状态
const saveNavState = Path => {
  window.sessionStorage.setItem("activePath", Path);
  activePath.value = Path;
  router.push({ name: activePath.value });
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}

.el-header {
  background-color: rgb(255, 255, 254);
  display: flex;
  justify-content: space-between;
  padding-left: 0px;
  align-items: center;
  color: #000000;
  font-size: 20px;
  margin-bottom: 10px;

  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  > div {
    display: flex;
    align-items: center;

    span {
      margin-left: 15px;
    }
  }
}

.el-aside {
  background-color: #ffff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  .el-menu {
    border-right: none;
  }
}

.el-main {
  background-color: rgb(248, 249, 250);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  padding: 20px;
  margin-left: 15px;
}

.el-menu-item {
  color: #212224;
}
.el-menu-item.is-active {
  color: rgb(255, 255, 255);
  background-color: #165dff;
}
.toggle-button {

  font-size: 22px;
  line-height: 38px;
  color: #5e5b5b;
  text-align: center;
  //设置文字之间的间距
  letter-spacing: 0.2em;
  cursor: pointer;
}

.user {
  margin-right: 15px;
  color: #ccc;
  font-size: 16px;
}

.el-menu-item:hover {
  background-color: rgb(221, 235, 248) !important;
}
</style>
